<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>创建奖品</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css"></link>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: white;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 10px auto;
            padding: 20px;
            background-color: #fff;
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type=text],
        .form-group input[type=url] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .form-group textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .btn {
            border: none;
            border-radius: 6px;
            cursor: pointer;
            width: 140px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        .prize-row {
            margin-bottom: 10px;
        }
        .container h2{
            font-weight: 600;
            font-size: 30px;
            letter-spacing: 1px;
            color: #000000;
            line-height: 50px;
            text-align: center;
            margin-bottom: 40px;
        }
        .upload-box{
            display: flex;
            width: 150px;
            height: 150px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px dashed  #d96c1c;
            background-color: #fef9edb0;
            cursor: pointer;
            margin-bottom: 10px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        .plus{
            color: #4C8DFB;
            font-size: 30px;
        }
        .up-txt{
            font-weight: 400;
            font-size: 14px;
            color: #4C8DFB;
        }
        .upload-box .form-control{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            z-index: 2;
        }
        .preview-img{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: none;
            background-color: #fff;
            object-fit: scale-down;
        }
        .was-validated .form-control:invalid {
            border-color: #dc3545;
        }
        .was-validated .form-control:invalid ~ .invalid-feedback {
            display: block;
        }
        .invalid-feedback {
            display: none;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 80%;
            color: #dc3545;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>开始创建奖品</h2>
    <form id="prizeForm">  <!-- 添加form元素包裹整个表单 -->
        <div id="prizeRows">
            <div class="prize-row">
                <div class="form-group">
                    <label for="prizeName">奖品名称</label>
                    <input class="form-control prize-name" type="text" placeholder="请输入奖品名称"
                           id="prizeName" name="prizeName" required>
                </div>
                <div class="form-group">
                    <label for="prizeImageUrl">奖品图片</label>
                    <div class="img-upload">
                        <div class="upload-box">
                            <span class="plus">+</span>
                            <span class="up-txt">上传图片</span>
                            <img src="./pic/bg.png" class="preview-img" id="previewImg" alt="">
                            <input class="form-control" type="file" onchange="showImg()"
                                   id="prizeImageUrl" name="prizeImageUrl" required>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="price">奖品价格</label>
                    <input class="form-control prize-price" placeholder="请输入奖品价格"
                           type="number" id="price" name="price" required min="0">
                </div>
                <div class="form-group">
                    <label for="description">奖品描述</label>
                    <textarea class="form-control prize-description" id="description"
                              placeholder="请输入奖品描述" name="description" required></textarea>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">创建奖品</button>
    </form>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    var userToken = localStorage.getItem("user_token");
    var formData = new FormData();

    // 表单提交处理
    $('#prizeForm').on('submit', function(e) {
        e.preventDefault(); // 阻止默认表单提交

        // 检查表单有效性
        if (!this.checkValidity()) {
            // 如果表单无效，触发浏览器的验证提示
            $(this).addClass('was-validated');
            return;
        }

        var prizeName = $('#prizeName').val();
        var description = $('#description').val();
        var price = $('#price').val();

        formData.append("param", JSON.stringify({
            prizeName: prizeName,
            description: description,
            price: price,
        }));

        $.ajax({
            url: '/prize/create',
            type: 'POST',
            contentType: false,
            processData: false,
            headers: {
                "user_token": userToken
            },
            data: formData,
            success: function(result) {
                if(result.code == 200) {
                    alert('奖品创建成功！');
                    resetForm();
                    window.parent.postMessage({
                        from:'prizes-list.html',
                        id:'#prizeList'
                    },'*');
                } else {
                    alert('创建奖品失败：' + result.msg);
                }
            },
            error: function(err) {
                console.log(err);
                if(err != null && err.status == 401) {
                    alert("用户未登录, 即将跳转到登录页!");
                    window.location.href = "/login.html";
                    window.parent.location.href = "/login.html";
                }
            }
        });
    });

    function resetForm() {
        $('#prizeForm')[0].reset();
        $('#previewImg').hide().attr('src', '');
        $('#prizeForm').removeClass('was-validated');
    }

    function showImg() {
        var fileInput = document.getElementById("prizeImageUrl");
        if (!fileInput.files || !fileInput.files[0]) return;

        var file = fileInput.files[0];
        formData.append("prizePic", file);

        var reader = new FileReader();
        reader.onload = function(e) {
            $('#previewImg').attr("src", e.target.result).show();
        }
        reader.readAsDataURL(file);
    }
</script>
</body>
</html>